<template>
    <view>
        <view class="address-info" @click="selectAddress">
            <image class="address-map" :src="require('../static/address/map.png')" mode="scaleToFill" />
            <view class="address-info-text">{{ addressInfo }}</view>
            <image class="address-up" :src="require('../static/address/up.png')" mode="scaleToFill" />
        </view>
        <uv-loading-icon :show="loading"></uv-loading-icon>
        <view class="bank-main" v-if="list.length">
            <view class="bank-item" v-for="(item, index) in list" :key="index">
                <view class="msg-text"> {{`${item.name}` }}</view>
                <view class="msg-bt">
                    <view class="msg-phone">{{ item.telephone.split(',')[0] }}</view>
                    <view class="msg-address">
                        <view class="address-item-outletsAddress-phone" @click="openMap(item)">
                            <image style="width: 21rpx; height: 17rpx; margin-right: 10rpx;"
                                :src="require('../static/address/dh.png')" mode="scaleToFill" />
                            <text>{{ (item.distance / 1000).toFixed(2) }}KM</text>
                        </view>
                        <view class="address-item-outletsPhone" @click="callPhone(item)">
                            <image :src="require('../static/address/phone01.png')" mode="scaleToFill" />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bank-main" v-else>
            <empty></empty>
        </view>

        <uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
            <view class="uni-popup">
                <view class="line" hover-class="none" hover-stop-propagation="false"></view>

                <view class="popup-top" v-for="item in phoneList" :key="item" @click="selectPhone(item)">
                    <view class=" item">{{ item }}</view>

                </view>
            </view>
        </uni-popup>

    </view>
</template>

<script>
import Routine from "@/libs/routine.js";
import residenceTime from "@/mixins/residenceTime";
import { getBankListApi } from '@/api/tools.js'
import empty from '../../components/empty/empty.vue';
export default {
    components: { empty },
    mixins: [residenceTime],
    data() {
        return {
            where: {
                pageNum: 1,
                pageSize: 10,
                platformType: 2
            },
            bankId: '',
            list: [],
            total: 0,
            addressInfo: '请选择地理位置',
            lon: {},
            isAuthLocation: false, //是否授权位置
            phoneList: [],
            loading: false
        }
    },
    onShow() {
        uni.$on('getLocation', (data) => {
            if (data == 'ok') {
                this.getLocation()
            } else {
                this.isAuthLocation = false
            }
        })
        uni.$on('updateAddress', (data) => {
            console.log("data", data)
            if (data) {
                this.addressInfo = `${data.msg.district ? data.msg.district : ''}` + data?.msg?.name
                const dataArr = data.msg.location.split(',')
                this.lon = { lon: dataArr[0], lat: dataArr[1] }
                this.list = []
                this.where.pageNum = 1
                this.getBankList()
            }
        })
    },
    async onLoad(options) {
        this.bankId = options.id;
        this.bankName = options.name;
        uni.setNavigationBarTitle({
            title: options.name
        });
        await this.getLocation()
    },
    onReachBottom() {
        if (this.where.pageNum * this.where.pageSize < this.total) {
            this.where.pageNum++
            this.getBankList()
        } else {
            this.$util.Tips('没有更多数据了')
        }
    },
    methods: {
        pageViewTrack(stayTime) {
            const route = this.$util.getCurrentRoute()
            let params = {
                Um_Key_SourcePage: route.path,
                Um_Key_Duration: stayTime,
            }
            this.$umaTrack.pageViewTrack(params)
        },
        openMap(v) {
            uni.openLocation({
                latitude: Number(v.lat),
                longitude: Number(v.lon),
                success: function () {
                    console.log('success');
                },
                fail: function (err) {
                    console.log(err, 'fail');
                },
            });
            let params = {
                Um_Key_ButtonName: '银行通讯录' + '-' + '导航',
                Um_Key_SourcePage: '银行通讯录',
            }
            this.$umaTrack.pageClickTrack(params)
        },
        selectPhone(phone) {
            uni.makePhoneCall({
                phoneNumber: phone, // 电话号码
                success: function () {
                    console.log('拨号成功');
                },
                fail: function () {
                    console.log('拨号失败');
                }
            });
            let params = {
                Um_Key_ButtonName: '银行通讯录' + '-' + '拨打电话',
                Um_Key_SourcePage: '银行通讯录',
            }
            this.$umaTrack.pageClickTrack(params)
        },
        callPhone(v) {
            if (!v.telephone) return this.$util.Tips('暂无电话号码')
            if (v.telephone.split(',').length == 1) return this.selectPhone(v.telephone)
            this.phoneList = v.telephone.split(',')
            this.$refs.popup.open()
        },
        selectAddress() {
            if (!this.isAuthLocation) return this.getLocation()
            uni.navigateTo({
                url: '/pagesTools/selectAddress/index'
            })
        },
        getLocation() {
            this.loading = true
            let that = this;
            Routine.gettLocation().then(async res => {
                that.isAuthLocation = true;
                that.lon.lon = res.longitude;
                that.lon.lat = res.latitude;
                await this.getAddressInfo(res.longitude, res.latitude)
                await that.getBankList()
            })
        },
        getBankList() {
            let params = {
                ...this.where,
                bankId: this.bankId,
                ...this.lon
            }
            getBankListApi(params).then(res => {
                res.data.list.forEach(item => {
                    item.name = this.bankName + item.name
                })
                this.list = [...this.list, ...res.data.list]
                this.total = res.data.total
            }).finally(() => {
                this.loading = false
            })
        },
        getAddressInfo(lon, lat) {
            let that = this;
            uni.request({
                url: 'https://restapi.amap.com/v3/geocode/regeo?parameters',
                method: 'GET',
                data: {
                    key: '329b1e97a844a0cf2be6e3046a5632cc',
                    location: `${lon}, ${lat}`
                },
                success: async (data) => {
                    that.addressInfo = data.data.regeocode.formatted_address;
                },
                fail(err) {
                    console.log(err);
                }
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.address-info {
    display: flex;
    align-items: center;
    height: 100rpx;
    background: #FFFFFF;
    justify-content: space-between;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(255, 255, 255, 0.5);
    padding: 0 30rpx;
    margin-bottom: 30rpx;

    .address-info-text {
        width: 646rpx;
        height: 40rpx;
        font-weight: 600;
        font-size: 28rpx;
        color: #333333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .address-map {
        width: 23rpx;
        height: 33rpx;
    }

    .address-up {
        width: 18rpx;
        height: 14rpx;
    }
}

.bank-main {
    padding: 0 30rpx;

    .bank-item {
        padding: 20rpx 0;
        border-bottom: 1rpx solid #EDEDED;

        .msg-text {
            font-weight: 500;
            font-size: 32rpx;
            color: #333333;
        }

        .msg-bt {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20rpx;

            .msg-phone {
                font-weight: 400;
                font-size: 28rpx;
                color: #999999;
            }

            .msg-address {
                display: flex;
                align-items: center;

                .address-item-outletsAddress-detail {
                    width: 75%;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #999999;
                }

                .address-item-outletsAddress-phone {
                    width: 148rpx;
                    height: 46rpx;
                    line-height: 46rpx;
                    background: #ECF3FE;
                    border-radius: 23rpx;
                    text-align: center;
                    font-weight: 600;
                    font-size: 22rpx;
                    color: #2872FD;
                }

                .address-item-outletsPhone {
                    width: 90rpx;
                    height: 46rpx;
                    margin-left: 10rpx;

                    >image {
                        width: 100%;
                        height: 100%;

                    }
                }
            }


        }
    }
}

.uni-popup {
    width: 750rpx;
    height: 634rpx;
    background: #ffffff;
    border-radius: 24rpx 24rpx 0rpx 0rpx;
    padding: 40rpx 30rpx 30rpx 30rpx;
    background-color: #fff;

    .line {
        width: 60rpx;
        height: 6rpx;
        background: #e6e6e6;
        border-radius: 5rpx;
        margin: auto;
    }

    .popup-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-top: 20rpx;
        padding-bottom: 20rpx;
    }

    image {
        width: 95rpx;
        height: 50rpx;
    }
}

.item {
    font-size: 30rpx;
    margin: 10rpx auto;
    font-weight: bold;
    // margin-bottom: 30rpx;
    // margin-top: 30rpx;
}

.mat {
    width: 100%;
    height: 50rpx;
}
</style>